<template>
    <div :class="['main-layout', collapse && 'collapse']">
        <aside>
            <header>华杏医疗生产管理系统</header>
            <main>
                <MyMenu :collapse="collapse" :menuList="newMenuList"/>
            </main>
        </aside>
        <main>
            <nav>
                <el-button style="float: left;"
                    size="small"
                    @click="collapse = !collapse"
                    :icon="collapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"/>
                <span class="menu-info">
                    当前页面：{{menuInfo}}
                </span>

                <el-dropdown class="my-dropdown" trigger="click">
                    <span class="el-dropdown-link">
                        {{username.name}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <!-- 这里是给el-dropdown-item绑定的click事件，click事件是一个自定义事件，如果这个组件没有实现这个自定义事件，那么事件会失效 -->
                        <!-- click事件有修饰符 -->
                        <el-dropdown-item v-on:click.native="logoutEvt" icon="el-icon-switch-button">退出系统</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </nav>
            <article>
                <router-view v-if="isRouterAlive"/>
            </article>
        </main>
    </div>
</template>

<script>
import MyMenu from './MyMenu.vue'
export default {
    components: {
        MyMenu
    },
    provide(){
        return{
            reload:this.reload
        }
    },
    data() {
        return {
            collapse: false,
            newMenuList: [],
            menuInfo: '',
            username:{},
            isRouterAlive:true
        }
    },
    watch: {
        '$route.path': {
            immediate: true,
            handler(val) {
                let _this = this
                let nowNode = _this.menuList.find(it => it.path === val)
                console.log(nowNode.path)
                let names = [nowNode.name]
                function loop(pId) {
                    let node = _this.menuList.find(it => it.id === pId)
                    names.unshift(node.name)
                    if (!!node.parent_id) loop(node.parent_id)
                }
                loop(nowNode.parent_id)
                _this.menuInfo = names.join(' > ')
            }
        }
    },
    computed: {
        menuList() {
            return this.$store.getters['common/menuList']
        }
    },
    mounted() {
        this.newMenuList = this.makeTree(this.menuList)
        this.username = this.$store.getters['common/userInfo']
    },
    methods: {
        logoutEvt() {
            // 在退出的时候要把缓存清理调
            sessionStorage.clear()
            this.$store.commit('common/clear')
            this.$router.push('/login')
        },
        makeTree(arr, pId) {
            let newArr = arr.filter(it => (!pId ? !it.parent_id : it.parent_id === pId))
            newArr.map(it => {
                // 执行递归查询--如果有子节点的节点需要进行递归业务
                // 在数组中查询是否有对象的parent_id和我的id相等，如果有，那么我就有子节点，否则没有子节点
                let hasChildren = arr.findIndex(item => item.parent_id === it.id) > -1
                if (hasChildren) {
                    it.children = this.makeTree(arr, it.id)
                }
            })
            return newArr
        },
        reload(){
            this.isRouterAlive=false
            this.$nextTick(function(){
                this.isRouterAlive=true
            })
        }
    }
}
</script>

<style lang="less">
    @import "../style/common.less";

    .main-layout {
        display: flex;
        position: relative;
        height: 100%;
        &.collapse {
            > aside {
                flex: 0 0 64px;
            }
        }
        > aside {
            flex: 0 0 240px;
            height: 100%;
            transition: all .25s linear;
            background: #545c64;
            width: 0;
            > header {
                display: block;
                position: relative;
                height: 48px;
                border-bottom: solid 1px white;
                padding-left: 64px;
                font-size: .8rem;
                color: white;
                line-height: 48px;
                overflow: hidden;
                white-space: nowrap;
                &::before {
                    content: '';
                    display: block;
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 48px;
                    width: 64px;
                    background: url(../images/logo.png) center center / 26px 26px no-repeat;
                }
            }
            > main {
                display: block;
                position: relative;
                height: calc(100% - 48px);
                overflow-x: hidden;
            }
        }
        > main {
            flex: 1;
            width: 0;
            > nav {
                display: block;
                height: 48px;
                padding: 8px 12px;
                background: white;
                // 因为导航栏中有很多标签，浮动在左右--清除浮动
                &::after {
                    content: '';
                    display: block;
                    height: 0;
                    width: 0;
                    clear: both;
                }
                .menu-info {
                    float: left;
                    margin-left: 10px;
                    font-size: 14px;
                    color: #666;
                    line-height: 32px;
                }
            }
            > article {
                display: block;
                position: relative;
                height: calc(100% - 48px);
                padding: 12px;
                overflow-x: hidden;
            }
        }
    }

    .menu-icon {
        .font-cls(@color: white);
    }
    .el-dropdown-link{
        cursor: pointer;
    }
    .my-dropdown {
        color: #409EFF;
        float: right;
        line-height: 32px;
        margin-right: 50px;
    }
</style>